<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
           

        window.onload=function(){
            var items=document.getElementsByName("items");
            /*
                全选按钮
                    -点击按钮后，四个多选框都被选中
            */
            var checkedAllBtn=document.getElementById("checkedAllBtn");
            checkedAllBtn.onclick=function(){
                //设置四个多选框为 选中状态
                for(var i=0;i<items.length;i++){
                    items[i].checked=true;
                }
            }
            /*
                全不选按钮
                    -点击按钮后，四个多选框都不被选中
            */
            var checkedNoBtn=document.getElementById("checkedNoBtn");
            checkedNoBtn.onclick=function(){
                //设置四个多选框为 选中状态
                for(var i=0;i<items.length;i++){
                    items[i].checked=false;
                }
            }
            /*
                反选选按钮
            */
            var checkedRecBtn=document.getElementById("checkedRecBtn");
            checkedRecBtn.onclick=function(){
                //设置四个多选框为 选中状态
                for(var i=0;i<items.length;i++){
                    // if(items[i].checked==false)
                    //     items[i].checked=true;
                    // else{
                    //     items[i].checked=false;
                    // }
                    items[i].checked=!items[i].checked;
                }
            }
            /*
                提交按钮
                    -将所有选中的多选框以value属性弹出
            */
            var sendBtn=document.getElementById("sendBtn");
            sendBtn.onclick=function(){
                for(var i=0;i<items.length;i++){
                    if(items[i].checked)
                    alert(items[i].value);
                }
            }
            /*
                全选，全不选按钮
                    
            */
            var checkedAllBox=document.getElementById("checkedAllBox");
            checkedAllBox.onclick=function(){
                for(var i=0;i<items.length;i++){
                    items[i].checked=this.checked;
                }
            }
            /*
                如果四个多选框全都选中，则checkedAllBox也应该选中
                如果四个多选框全都不选中，则checkedAllBox也应该不选中

            */
            for(var i=0;i<items.length;i++){
                items[i].onclick=function(){

                };
            }
        }
    </script>
</head>
<body>
    <form method="post" action="">
        你的爱好是？<input type="checkbox" id="checkedAllBox"/>全选/全不选
        <br/>
        <input type="checkbox" name="items" value="足球"/>足球
        <input type="checkbox" name="items" value="篮球"/>篮球
        <input type="checkbox" name="items" value="羽毛球"/>羽毛球
        <input type="checkbox" name="items" value="乒乓球"/>乒乓球
        <br/>
        <input type="button" id="checkedAllBtn" value="全 选"/>
        <input type="button" id="checkedNoBtn" value="全不选"/>
        <input type="button" id="checkedRecBtn" value="反 选"/>
        <input type="button" id="sendBtn" value="提 交"/>
    </form>
</body>
</html>